<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>计算属性</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <!-- 
        计算属性
        注意点：   
            a. 计算属性没有全局和局部一说；
            b. 计算属性使用的声明属性名是computed;
            c. 计算属性在声明的时候，其形式非常像methods；
            d. 计算属性重点是其名字中的“属性”二字，虽然其声明的时候我们写的是方法，但是最终在编译的环节其会被vue转化成vue的属性，因此在调用的时候千万不要加“()”
            e. 不要从代码书写层面去考虑计算属性的存在意义，应当在执行流程上去考虑：
                    计算属性在依赖的数据没有变化的情况下，只会走1次执行流程。
                    而函数/方法则不然，不管依赖的数据是否有变化，只要调用就会走执行流程。
                    在依赖数据不变的情况下，计算属性的执行效率要高于methods。
            场景？
            例如：购物车有加个的计算，此时就可以使用计算属性。包括涉及到公式的套用的地方都可以使用计算属性。
     -->
    <div id="app">
        <div>
            <!-- 方法的调用 -->
            <div>{{fn()}}</div>
            <div>{{fn()}}</div>
            <div>{{fn()}}</div>
            <div>{{fn()}}</div>
            <div>{{fn()}}</div>
        </div>
        <hr/>
        <div>
            <!-- 计算属性调用 -->
            <div>{{cfn}}</div>
            <div>{{cfn}}</div>
            <div>{{cfn}}</div>
            <div>{{cfn}}</div>
            <div>{{cfn}}</div>
            <div>{{cfn}}</div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1537,
                firstName: "",
                lastName: ""
            },
            // 计算属性
            computed: {
                cfn() {
                    console.log('调用了computed里的方法');
                    return this.num
                    // return this.firstName + this.lastName
                }
            },
            // 方法的声明
            methods: {
                fn() {
                    console.log('调用了methods里的方法');
                    return this.num
                }
            }
        })
    </script>
</body>

</html>